@charset "utf-8";

@import "../../sass/mixins/form";
@import "../../sass/mixins/icon";
@import "../../sass/mixins/grid";

$form-prefix: #{'.' + $css-prefix + 'form-'};

.#{$css-prefix}input{
  @include input();
}

.#{$css-prefix}textarea{
  @include input($height: 4.5em);
  line-height: 1.5em;
}

.#{$css-prefix}checkbox-wrap,
.#{$css-prefix}radio-wrap{
  display: flex;
  line-height: $form-input-height;
  input{
    @include input()
  }
  input,span{
    flex-basis: auto;
  }
}

.#{$css-prefix}checkbox-group,
.#{$css-prefix}radio-group{
  display: flex;
  flex-wrap: wrap;
  .#{$css-prefix}checkbox-wrap,
  .#{$css-prefix}radio-wrap{
    flex-basis: auto;
    margin-right: 15px;
  }
}

.#{$css-prefix}input-wrap{
  position: relative;
  .#{$css-prefix}icon-close{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: $form-input-height;
    line-height: $form-input-height;
    text-align: center;
    color: $grayer;
    cursor: pointer;
    @include iconfont-code('\e643');
    opacity: 0;
    transition: opacity .3s;
  }
  &:hover{
    .#{$css-prefix}icon-close{
      opacity: 1;
    }
  }
}

// 横向排列
#{$form-prefix}group-horizontal{
  #{$form-prefix}item{
    @include row-float();
    &-label{
      text-align: right;
    }
  }
}

// 行内排列
#{$form-prefix}group-inline{
  @include row();
  flex-wrap: wrap;
  #{$form-prefix}item{
    flex-basis: auto;
    margin-right: 15px;
  }
}

// 纵向排列
#{$form-prefix}item{
  padding-bottom: 10px;
  &-label{
    text-transform: capitalize;
    font-size: $form-font-size;
    height: $form-input-height;
    line-height: $form-input-height;
    padding-right: 10px;
    position: relative;
    z-index: 100;
  }
  &-required{
    &:before{
      display: inline-block;
      margin-right: 4px;
      content: "*";
      font-family: SimSun;
      line-height: 1;
      color: $danger-color;
    }
  }
  &-explain{
    color: $lighterGray;
    line-height: 21px;
    text-align: left;
  }
  &-has-error {
    #{$form-prefix}item-explain{
      color: $danger-color;
    }
  }

  select,
  textarea,
  input[type="text"],
  input[type="password"]{
    @extend .#{$css-prefix}input;
    width: 100%;
  }
  textarea{
    width: 100%;
    padding: 3px;
    height: 4rem;
    //resize: none;
  }
}


#{$form-prefix}item-inline{
  @extend #{$form-prefix}item;
  float: left;
  margin-right: 20px;
  &-label{
    @extend #{$form-prefix}item-label;
    float: left;
  }
  &-control{
    float: left;
  }
}

.#{$css-prefix}form-group{
  //@extend .row;
  //.#{$css-prefix}form-item{
  //  &.required,
  //  .required{
  //    .star{
  //      color: #d63540;
  //      position: relative;
  //      top: 2px;
  //      left: -3px;
  //      font-weight: 900;
  //    }
  //  }
  //  @extend .clearfix;
  //  @extend .pb10;
  //  label{
  //    float: left;
  //    font-size: $form-font-size;
  //    height: $form-input-height;
  //    line-height: $form-input-height;
  //    text-align: right;
  //    padding-right: 10px;
  //  }
  //  input[disabled]{
  //    background-color: #eee;
  //  }
  //  select,
  //  textarea,
  //  input[type="text"],
  //  input[type="password"]{
  //    @extend .#{$css-prefix}input;
  //    width: 100%;
  //    &::placeholder{
  //      color: #ccc;
  //    }
  //  }
  //  input[type="radio"]{
  //    float: left;
  //    width: 13px;
  //    height: 13px;
  //    margin: 7px 3px 0 0;
  //  }
  //  .#{$css-prefix}select-wrap,
  //  textarea{
  //    width: 100%;
  //    padding: 3px;
  //    height: 4rem;
  //    //resize: none;
  //  }
  //  .icon-question{
  //    font-size: 18px;
  //    cursor: pointer;
  //  }
  //}
}

//.#{$css-prefix}form-group-absolute{
//  @extend .#{$css-prefix}form-group;
//  .#{$css-prefix}form-item{
//    position: relative;
//    padding-left: 62px;
//    label{
//      text-align: left;
//      position: absolute;
//      left: 0;
//    }
//  }
//}




//.#{$css-prefix}input-checkbox{
//  &.disabled{
//    opacity: .4;
//    cursor: not-allowed;
//    input{
//      cursor: not-allowed;
//    }
//  }
//  @extend .icon-box;
//  @extend .text-center;
//  @extend .relative;
//  display: inline-block;
//  width: $form-input-checkbox-size;
//  height: $form-input-checkbox-size;
//  line-height: $form-input-checkbox-size;
//  border-radius: 100%;
//  transition: color .5s;
//  color: $form-input-checkbox-color;
//  font-size: $form-input-checkbox-size;
//  margin-top: ($form-input-height - $form-input-checkbox-size) / 2;
//  input[type="checkbox"]{
//    @extend .absolute;
//    opacity: 0;
//    top: 0;
//    left: 0;
//    width: $form-input-checkbox-size;
//    height: $form-input-checkbox-size;
//    margin: 0;
//    cursor: pointer;
//  }
//}
//.#{$css-prefix}input-checkbox-checked{
//  @extend .#{$css-prefix}input-checkbox;
//  @extend .icon-multi-select;
//  color: $form-input-checkbox-checked-color;
//}
//
//
//.#{$css-prefix}input-radio{
//  &.disabled{
//    opacity: .4;
//    cursor: not-allowed;
//    input{
//      cursor: not-allowed;
//    }
//  }
//  @extend .icon-circle;
//  @extend .text-center;
//  @extend .relative;
//  display: inline-block;
//  width: $form-input-radio-size;
//  height: $form-input-radio-size;
//  line-height: $form-input-radio-size;
//  border-radius: 100%;
//  transition: color .8s;
//  color: $form-input-radio-color;
//  font-size: $form-input-radio-size;
//  margin-top: ($form-input-height - $form-input-radio-size) / 2;
//  input[type="radio"]{
//    @extend .absolute;
//    opacity: 0;
//    top: 0;
//    left: 0;
//    width: $form-input-radio-size;
//    height: $form-input-radio-size;
//    margin: 0;
//    cursor: pointer;
//  }
//}
//.#{$css-prefix}input-radio-checked{
//  @extend .#{$css-prefix}input-radio;
//  @extend .icon-radio;
//  color: $form-input-radio-checked-color;
//}
//
//// search bar
//.#{$css-prefix}search-bar{
//  @extend .relative;
//  display: inline-block;
//  .icon-search{
//    @extend .absolute;
//    @extend .pointer;
//    right: 0;
//    top: 0;
//    bottom: 0;
//    width: 30px;
//    height: $form-input-height;
//    line-height: $form-input-height;
//    text-align: center;
//    color: #9d9d9d;
//  }
//}
//
//// 组合搜索
//.#{$css-prefix}group-search-bar{
//  .#{$css-prefix}select-wrap{
//    .#{$css-prefix}select-value{
//      border-bottom-right-radius: 0;
//      border-top-right-radius: 0;
//      margin-right: -1px;
//    }
//  }
//  .#{$css-prefix}input{
//    border-bottom-left-radius: 0;
//    border-top-left-radius: 0;
//    min-width: 200px;
//  }
//}